<template>
	<view>
		<view class="mainpadding">
			<view class="ershiba xiaohei nofonweight mainpadding">定位：{{cityinfo.name}}</view>
			<view class="sanshier xiaohei fonweight margin_top">城市列表</view>
			<view class="margin_top">
				<u-index-list :index-list="indexList">
					<template v-for="(item, index) in itemArr">
						<!-- #ifdef APP-NVUE -->
						<u-index-anchor :text="item.key"></u-index-anchor>
						<!-- #endif -->
						<u-index-item>
							<!-- #ifndef APP-NVUE -->
							<u-index-anchor :text="item.key"></u-index-anchor>
							<!-- #endif -->
							<view class="list-cell" v-for="(cell, index) in item.list" @click="checkcity(cell)">
								{{cell.name}}
							</view>
						</u-index-item>
					</template>
				</u-index-list>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")

	export default {
		data() {
			return {
				name: "chengshi",
				props: ['messageInfo'],
				indexList: [],
				itemArr: [],
			}
		},
		created() {
			let cityinfo = uni.getStorageSync("cityinfo")
			if (!cityinfo.id) {
				this.getlocation()
			} else {
				this.cityinfo = cityinfo
			}
			this.getcityList()
		},
		methods: {
			checkcity(item) {
				this.cityinfo = {
					name: item.name,
					lat: item.lat,
					lng: item.lng,
					id: item.id,
					pid: item.pid
				}
				uni.setStorageSync("cityinfo", this.cityinfo)
			},
			getcityList() {
				httpRequest.request('/api/index/getCityList', 'POST', {
					keywords: this.keywords
				}, false, false, true).then(res => {
					let indexList = []
					res.data.forEach(item => {
						indexList.push(item.key)
					})
					this.itemArr = res.data
					this.indexList = indexList
				})
			},
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function(res) {
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getcityInfo()
					}
				});
			},
			getcityInfo() {
				httpRequest.request('/api/index/getCurrCity', 'POST', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					this.cityinfo = {
						name: res.data.name,
						lat: res.data.lat,
						lng: res.data.lng,
						id: res.data.id,
						pid: res.data.pid
					}
					uni.setStorageSync("cityinfo", this.cityinfo)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-index-list__letter {
		position: absolute !important;
		right: -10px;
		top: 190rpx !important;
		text-align: center;
		z-index: 0;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 0;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>